<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    width="450px"
    :show-close="false"
    center
    :close-on-click-modal="false"
  >
    <div class="success-content">
      <div class="success-icon">
        <el-icon :size="60" color="#67C23A">
          <SuccessFilled />
        </el-icon>
      </div>
      
      <h3 class="success-title">文件加载成功！</h3>
      
      <div class="file-info">
        <div class="info-item">
          <span class="info-label">文件名：</span>
          <span class="info-value">{{ fileInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">文件大小：</span>
          <span class="info-value">{{ fileInfo.size }}</span>
        </div>
        <div class="info-item" v-if="fileInfo.dimensions">
          <span class="info-label">影像尺寸：</span>
          <span class="info-value">{{ fileInfo.dimensions }}</span>
        </div>
        <div class="info-item" v-if="fileInfo.sliceThickness">
          <span class="info-label">层厚：</span>
          <span class="info-value">{{ fileInfo.sliceThickness }}</span>
        </div>
      </div>

      <el-button 
        type="primary" 
        size="large"
        class="action-button"
        @click="handleStartAnalysis"
      >
        <el-icon class="button-icon"><VideoPlay /></el-icon>
        开始分析
      </el-button>

      <div class="auto-close-tip">
        {{ autoCloseSeconds }} 秒后自动关闭
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { SuccessFilled, VideoPlay } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  fileInfo: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      size: '',
      dimensions: '',
      sliceThickness: ''
    })
  },
  autoClose: {
    type: Number,
    default: 5000 // 5秒
  }
})

// Emits
const emit = defineEmits(['update:visible', 'start-analysis', 'close'])

// Data
const dialogVisible = ref(props.visible)
const autoCloseSeconds = ref(Math.floor(props.autoClose / 1000))
let autoCloseTimer = null
let countdownTimer = null

// Watch
watch(() => props.visible, (val) => {
  dialogVisible.value = val
  
  if (val) {
    startAutoClose()
  } else {
    clearTimers()
  }
})

watch(dialogVisible, (val) => {
  emit('update:visible', val)
  
  if (!val) {
    clearTimers()
    emit('close')
  }
})

// Methods
const startAutoClose = () => {
  autoCloseSeconds.value = Math.floor(props.autoClose / 1000)
  
  // 倒计时
  countdownTimer = setInterval(() => {
    autoCloseSeconds.value -= 1
    
    if (autoCloseSeconds.value <= 0) {
      clearInterval(countdownTimer)
    }
  }, 1000)
  
  // 自动关闭
  autoCloseTimer = setTimeout(() => {
    dialogVisible.value = false
  }, props.autoClose)
}

const clearTimers = () => {
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
    autoCloseTimer = null
  }
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
}

const handleStartAnalysis = () => {
  emit('start-analysis', props.fileInfo)
  dialogVisible.value = false
}

// Lifecycle
onUnmounted(() => {
  clearTimers()
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  border-radius: 16px;
  
  .el-dialog__header {
    padding: 0;
  }
  
  .el-dialog__body {
    padding: 40px 32px;
  }
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  .success-icon {
    margin-bottom: 20px;
    animation: scaleIn 0.5s ease-out;
  }

  .success-title {
    font-size: 22px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 24px;
  }

  .file-info {
    width: 100%;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;
    margin-bottom: 24px;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      
      &:not(:last-child) {
        border-bottom: 1px dashed #e4e7ed;
      }

      .info-label {
        font-size: 14px;
        color: #606266;
      }

      .info-value {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .action-button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    border-radius: 8px;
    transition: all 0.3s ease;

    .button-icon {
      margin-right: 8px;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
  }

  .auto-close-tip {
    font-size: 13px;
    color: #909399;
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>

